<h3>image</h3>
<img id="image_abcv" src="/images/4.png" style="display: none;" />
<div style="float: left;width:30%;">
    <canvas id="myCanvas_image"  width="200px" height="200px" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.</canvas>
</div>

<div style="float: left;padding:0% 1% 1% 1%;width:68%;">
    <textarea style="width: 100%;height: 300px;" id="code_image">
        var c=document.getElementById("myCanvas_image");
        c.width = c.width; //reset canvas
        
        var ctx=c.getContext("2d");
        var img=document.getElementById("image_abcv");
        ctx.drawImage(img,10,10);
        //ctx.drawImage(img,10,10,100,100); //Resize
        //ctx.drawImage(img,90,130,50,60,10,10,50,60); //Cut
    </textarea>
    <input type="button" value="run" onclick="run_code('#code_image')" />
    <input type="button" value="note" id="opener" onclick="$('#dialog').dialog('open');"/>
</div>

<div id="dialog" title="JavaScript Syntax">
<p>Position the image on the canvas:</p>
<table class="tecspec">
	<tbody><tr>
    <th style="width:150px;">JavaScript syntax:</th>
    <td><i>context</i>.drawImage(<i>img,x,y</i>);</td>
  </tr>
</tbody></table>
<p>Position the image on the canvas, and specify width and height of the image:</p>
<table class="reference notranslate">
	<tbody><tr>
    <th style="width:150px;">JavaScript syntax:</th>
    <td><i>context</i>.drawImage(<i>img,x,y,width,height</i>);</td>
  </tr>
</tbody></table>
<p>Clip the image and position the clipped part on the canvas:</p>
<table class="reference notranslate">
	<tbody><tr>
    <th style="width:150px;">JavaScript syntax:</th>
    <td><i>context</i>.drawImage(<i>img,sx,sy,swidth,sheight,x,y,width,height</i>);</td>
  </tr>
</tbody></table>
<h2>Parameter Values</h2>
<table class="reference notranslate">
	<tbody><tr>
        <th style="width:15%">Parameter</th>
        <th>Description</th>           
	</tr>
	<tr>
		<td><i>img</i></td>
		<td>Specifies the image, canvas, or video element to use</td>
	</tr>
	<tr>
		<td><i>sx</i></td>
		<td>Optional. The x coordinate where to start clipping</td>		
	</tr>
	<tr>
		<td><i>sy</i></td>
		<td>Optional. The y coordinate where to start clipping</td>		
	</tr>
	<tr>
		<td><i>swidth</i></td>
		<td>Optional. The width of the clipped image</td>		
	</tr>
	<tr>
		<td><i>sheight</i></td>
		<td>Optional. The height of the clipped image</td>		
	</tr>
	<tr>
		<td><i>x</i></td>
		<td>The x coordinate where to place the image on the canvas</td>		
	</tr>
	<tr>
		<td><i>y</i></td>
		<td>The y coordinate where to place the image on the canvas</td>		
	</tr>
	<tr>
		<td><i>width</i></td>
		<td>Optional. The width of the image to use (stretch or reduce the image)</td>		
	</tr>
	<tr>
		<td><i>height</i></td>
		<td>Optional. The height of the image to use (stretch or reduce the image)</td>		
	</tr>
</tbody></table>
</div>


<script type="text/javascript">
<!--
    $(function(){
	   run_code('#code_image');
	})


$(function() {
    $( "#dialog" ).dialog({
        autoOpen: false,
        width: 700,
        height: 600,
    });
});
-->
</script>

